<template>
  <!--pages/result/result.uniml-->
  <view class="preview">
    <image :src="imagePath" class="img"></image>
  </view>
  <view class="result-card" v-if="show">
    <view class="empty">
      <l-icon name="warning" size="32"></l-icon>
      <view class="text">未识别结果</view>
    </view>
  </view>

  <block v-if="!show">
    <view class="result-card">
      <view class="title">评分</view>
      <view class="score-content">
        <view class="count-score">
          <span> {{ zonfen }} </span><span class="chinese">分</span>
        </view>
        <view class="score-detail">
          <p>
            词汇得分 <span class="score"> {{ wordScore }} </span>分
          </p>
          <p>
            语法得分 <span class="score">{{ grammarScore }}</span
            >分
          </p>
          <p>
            逻辑得分 <span class="score">{{ structureScore }}</span
            >分
          </p>
          <p>
            内容得分 <span class="score">{{ topicScore }}</span
            >分
          </p>
        </view>
      </view>
    </view>

    <view class="result-card">
      <view class="title">点评</view>
      <view class="comment">
        <p>{{ essayAdvice }}</p>
        <p class="item-advice">语法:{{ grammarAdvice }} <br /></p>
        <p class="item-advice">
          词汇: {{ wordAdvice }}
          <br />
        </p>
        <p class="item-advice">结构: {{ structureAdvice }}<br /></p>
      </view>
      <view class="comment-content">
        <view class="remark"> <span class="line"></span><span class="text">智能纠错</span> </view>
        <view class="result-table" v-for="(item, index) in sentsFeedback" :key="index">
          <view class="tables">
            <view class="table-title">原句1</view>
            <view class="table-content">{{ item.rawSent }}</view>
          </view>
          <view class="tables">
            <view class="table-title">正确修改为</view>
            <view class="table-content">{{ item.rawSegSent }}</view>
          </view>
        </view>
      </view>
    </view>
  </block>
</template>

<script>
import { ref, onMounted } from 'vue'
import SHA256 from '../../utils/util/sha256'
import { searchAPI } from '@/services/kaosi'
export default {
  data() {
    return {
      imagePath: '', // 图片地址
      imageBase64: '', // 图片Base64编码
      questions: '', // 题目
      answer: '', // 答案
      analysis: '', // 答案解析
      show: false,
      zonfen: '',
      wordScore: '',
      grammarScore: '',
      structureScore: '',
      topicScore: '',
      grammarAdvice: '',
      structureAdvice: '',
      wordAdvice: '',
      essayAdvice: '',
      sentsFeedback: [],
    }
  },

  /**
   * 生命周期函数--监听页面加载
   */
  onLoad(options) {
    const imagePath = options.path

    this.imagePath = imagePath
    var that = this
    // 读取微信设备上的临时图片，返回base64编码
    uni.getFileSystemManager().readFile({
      filePath: imagePath,
      encoding: 'base64',
      success: function (res) {
        that.imageBase64 = res.data
        that.identify()
      },
    })
  },
  methods: {
    // 生成访问uuid
    uuid: function () {
      console.log('调用了 uuid')
      function S4() {
        return (((1 + Math.random()) * 0x10000) | 0).toString(16).substring(1)
      }
      return S4() + S4() + S4()
    },

    // 截取
    truncate: function (q) {
      console.log('调用了 truncate')
      const size = q.length
      if (size <= 20) {
        return q
      }
      return q.slice(0, 10) + size + q.slice(size - 10, size)
    },

    // 识别
    identify: function () {
      const url = 'https://openapi.youdao.com/v2/correct_writing_image'
      // 需要修改此处
      const appKey = '252bb1640d14eb99'
      // 需要修改此处
      const appSecret = 'X9FGNDf9qs7NvCAvKJ8DH1YFTkbVe3h4'
      var that = this
      const salt = that.uuid()
      var curtime = Math.round(new Date().getTime() / 1000)
      const signStr = appKey + that.truncate(that.imageBase64) + salt + curtime + appSecret
      const sign = SHA256.sha256_digest(signStr)
      console.log(salt, 'salt')
      console.log(curtime, '时间')
      console.log(signStr, '11111111111')
      console.log(sign, 'sign')
      const result = []
      // 访问有道智云API，获取识别结果
      uni.request({
        url: url,
        method: 'POST',
        header: {
          'Content-Type': 'application/x-www-form-urlencoded',
        },
        data: {
          appKey: appKey,
          curtime: curtime,
          q: that.imageBase64,
          salt: salt,
          signType: 'v3',
          sign: sign,
        },
        success: async function (res) {
          console.log(res, '我看看')
          if (res.data.errorCode == '0' && res.data.Result.essayFeedback.sentsFeedback.length > 0) {
            console.log('ok')
            that.zonfen = res.data.Result.totalScore
            that.wordScore = res.data.Result.majorScore.wordScore
            that.grammarScore = res.data.Result.majorScore.grammarScore
            that.structureScore = res.data.Result.majorScore.structureScore
            that.topicScore = res.data.Result.majorScore.topicScore
            that.grammarAdvice = res.data.Result.majorScore.grammarAdvice
            that.structureAdvice = res.data.Result.majorScore.structureAdvice
            that.wordAdvice = res.data.Result.majorScore.wordAdvice
            that.essayAdvice = res.data.Result.majorScore.essayAdvice
            that.sentsFeedback = res.data.Result.essayFeedback.sentsFeedback
          } else {
            that.setData({
              show: true,
            })
            console.log(res, '213231231232')
          }
        },
      })
    },
  },
}
</script>

<style scoped>
/* pages/result/result.uniss */

.preview {
  height: 300rpx;
  width: 100%;
}

.img {
  height: 300rpx;
  width: 100%;
}

.result-card {
  border-top: 20rpx solid #f2f2f2;
  padding: 30rpx;
}
.result-card .title {
  font-size: 40rpx;
  font-weight: bold;
}

.uniParse-p {
  font-size: 28rpx;
}

latex {
  width: auto !important;
}

.empty {
  width: 750rpx;
  margin-top: 50rpx;
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: center;
}
.empty .text {
  margin-left: 15rpx;
  font-size: 32rpx;
  color: #333;
}
.score-content {
  display: flex;
}
.score-content .count-score {
  width: 420rpx;
  height: 420rpx;
  background-color: #f7f9ff;
  color: #2962ff;
  display: flex;
  justify-content: center;
  align-items: center;
  border-radius: 50%;
  font-size: 88rpx;
  font-weight: 500;
  margin-left: 80rpx;
}
.score-detail {
  font-size: 30rpx;
  color: #909299;
  margin-left: 40rpx;
  margin-top: 30rpx;
}
.comment {
  font-size: 30rpx;
  color: #2e2f33;
  width: 700rpx;
  margin-top: 20rpx;
  margin-left: 24rpx;
}
.comment .item-advice {
  line-height: 150%;
}
.comment-content {
  margin-top: 76rpx;
}
.comment-content .remark {
  display: flex;
  align-items: center;
}
.remark .line {
  display: inline-block;
  width: 6rpx;
  height: 28rpx;
  margin-right: 16rpx;
  background-color: #2962ff;
}
.remark .text {
  font-size: 30rpx;
  font-weight: 700;
  color: #2e2f33;
}
.comment-content .result-table {
  border: 1px solid #eef0f3;
  border-radius: 4rpx;
  margin-top: 16rpx;
  margin-left: 11rpx;
  width: 670rpx;
}
.comment-content .result-table .tables {
  display: flex;
}
.comment-content .result-table .tables .table-title {
  width: 240rpx;
  background-color: #f5f7fa;
  font-size: 26rpx;
  padding-left: 40rpx;
  border-bottom: 1rpx solid #eef0f3;
  border-right: 1rpx solid #eef0f3;
  display: flex;
  align-items: center;
}
.comment-content .result-table .tables .table-content {
  width: 1000rpx;
  color: #2e2f33;
  border-bottom: 1rpx solid #eef0f3;
  display: flex;
  align-items: center;
  padding: 28rpx 40rpx;
  line-height: 40rpx;
}
</style>
